appDisplay: Make the app grid horizontal

Horizontal pagination is more natural than vertical, but for
historical reasons we ended up with a vertically paginated
app grid.

Make the app grid horizontal.

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/1554>

diff --git a/js/ui/appDisplay.js b/js/ui/appDisplay.js
index 09e035d6e4be64b68ae0110c8cc3650cc3714191..58817c7f3affd81be350ecd88f7fc68c00a1f525 100644 (file)
--- a/js/ui/appDisplay.js
+++ b/js/ui/appDisplay.js
@@ -126,7 +126,7 @@ var BaseAppView = GObject.registerClass({
         'view-loaded': {},
     },
 }, class BaseAppView extends St.Widget {
-    _init(params = {}, orientation = Clutter.Orientation.VERTICAL) {
+    _init(params = {}, orientation = Clutter.Orientation.HORIZONTAL) {
         params = Params.parse(params, { animateIndicators: true }, true);
 
         const animateIndicators = params.animateIndicators;
@@ -969,9 +969,15 @@ class AppDisplay extends BaseAppView {
             y_expand: true,
         });
         this.add_actor(this._stack);
-        this._stack.add_actor(this._scrollView);
 
-        this.add_actor(this._pageIndicators);
+        const box = new St.BoxLayout({
+            x_expand: true,
+            y_expand: true,
+            vertical: true,
+        });
+        this._stack.add_child(box);
+        box.add_child(this._scrollView);
+        box.add_child(this._pageIndicators);
 
         this._folderIcons = [];
 
@@ -1042,6 +1048,13 @@ class AppDisplay extends BaseAppView {
         super._redisplay();
     }
 
+    adaptToSize(width, height) {
+        const [, indicatorHeight] = this._pageIndicators.get_preferred_height(-1);
+        height -= indicatorHeight;
+
+        super.adaptToSize(width, height);
+    }
+
     _savePages() {
         const pages = [];
 
@@ -1693,7 +1706,6 @@ class FolderGrid extends IconGrid.IconGrid {
     _init() {
         super._init({
             allow_incomplete_pages: false,
-            orientation: Clutter.Orientation.HORIZONTAL,
             columns_per_page: 3,
             rows_per_page: 3,
             page_halign: Clutter.ActorAlign.CENTER,
@@ -1714,11 +1726,12 @@ class FolderView extends BaseAppView {
             x_expand: true,
             y_expand: true,
             animateIndicators: false,
-        }, Clutter.Orientation.HORIZONTAL);
+        });
 
         // If it not expand, the parent doesn't take into account its preferred_width when allocating
         // the second time it allocates, so we apply the "Standard hack for ClutterBinLayout"
         this._grid.x_expand = true;
+        this._pageIndicators.y_expand = false;
         this._id = id;
         this._folder = folder;
         this._parentView = parentView;

diff --git a/js/ui/iconGrid.js b/js/ui/iconGrid.js
index b7c8db5936d89239693aac154f3816bdeceb6bda..2e7b1bee2771230653cc1c52c36e5964f436ac5c 100644 (file)
--- a/js/ui/iconGrid.js
+++ b/js/ui/iconGrid.js
@@ -1334,7 +1334,7 @@ var IconGrid = GObject.registerClass({
     _init(layoutParams = {}) {
         layoutParams = Params.parse(layoutParams, {
             allow_incomplete_pages: false,
-            orientation: Clutter.Orientation.VERTICAL,
+            orientation: Clutter.Orientation.HORIZONTAL,
             columns_per_page: 6,
             rows_per_page: 4,
             page_halign: Clutter.ActorAlign.FILL,